<template>
  <div id="resource"></div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { Calendar } from '@fullcalendar/core';
  import resourceTimelinePlugin from '@fullcalendar/resource-timeline'; // 引入需要的视图
  async function fetch() {
    console.log('init');
    await nextTick();
    const calendarEl = document.getElementById('resource') as any;
    const calendar = new Calendar(calendarEl, {
      plugins: [resourceTimelinePlugin],
      initialView: 'resourceTimelineWeek', //resourceTimelineMonth
      //   headerToolbar: {
      //     left: 'prev,next today',
      //     center: 'title',
      //     right: 'resourceTimelineMonth,resourceTimelineWeek',
      //   },
      locale: 'zh-cn',
      headerToolbar: false, //隐藏头部
      buttonText: {
        today: '今天',
        month: '月',
        week: '周',
        day: '日',
      },
      resources: [{ title: 'Resource A' }, { title: 'Resource B', start: '2024-02-24T09:00:00' }],
    });

    calendar.render();
  }
  onMounted(fetch);
</script>
<style lang="less" scoped>
  #resource {
    width: 100%;
  }
</style>
